<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
request.setAttribute("title", "产品列表");
%>
<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>
<style>
.overflow-hidden {
	overflow: hidden;
}
.nav-ul {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	float: left;
	font-size: 0.8rem;
	color: #999;
}
.nav-ul>* {
	position: relative;
	float: left;
	list-style: none;
	margin: 0.2rem 1.1rem;
}
.nav-arrow {
	vertical-align: middle;
	max-height: 0.5rem;
	padding-left: 0.2rem;
	transform: translateY(-0.05rem);
}
.weui-media-box_appmsg .weui-media-box__hd {
	width: 6rem;
	height: auto;
	margin-right: 8px;
}
.weui-media-box_appmsg .weui-media-box__thumb {
	vertical-align: middle;

}
.weui-media-box__desc {
	font-size: 0.6rem !important;
}
.weui-media-box {
	padding: 8px;
}
</style>
<%@ include file="/WEB-INF/views/shared/master/weTitle.jsp"%>
<div class="weui-tab">
	<nav class="overflow-hidden">
		<ul class="nav-ul">
			<li id="sort-by-price" style="margin-left: 5px">
				<span>价格排序</span>
				<img class="nav-arrow" alt="" src="<c:url value='/images/we/productList/arrow_none.png' />">
			</li>
			<li id="sort-by-num">
				<span>销量排序</span>
				<img class="nav-arrow" alt="" src="<c:url value='/images/we/productList/arrow_none.png' />">
			</li>
			<li id="filtrate" style="margin-right: 5px">
				<span>筛选商品</span>
			</li>
		</ul>
	</nav>
</div>
<div class="page_bd">
	<div class="weui-panel weui-panel_access">
		<div class="weui-panel_body">
			<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
				<div class="weui-media-box__hd panel-img">
              		<img class="weui-media-box__thumb" src="<c:url value='/images/we/productList/yabzssx.jpg' />" alt="">
	            </div>
	            <div class="weui-media-box__bd">
		            <h4 class="weui-media-box__title" style="font-size: 0.8rem">优爱宝终身寿险</h4>
		            <p class="weui-media-box__desc"">后顾无忧|小投入高杠杆|超短等待期</p>
		            
		            <div style="inline-block">
		            	<span style="float:left;color:red; font-size:1rem;margin:0;padding:0">305.0<span style="color:red; font-size:0.5rem">元起</span></span>
			            <span style="float:right">
			            	<img alt="" src="<c:url value='/images/we/insuranceClassify/hengqinrenshou.png' />" style="width:3rem; vertical-align: middle;">    
			            </span>
		            </div>
					<div style="clear:left;width:100%">
						<span style="float:left;vertical-align:middle;color:#ff5b1d; font-size: 0.6rem">推广奖25%</span>
	            		<span style="float:right;color:#999;font-size: 0.6rem">销售0份</span>
					</div>
	            </div>
			</a>
			<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
				<div class="weui-media-box__hd panel-img">
              		<img class="weui-media-box__thumb" src="<c:url value='/images/we/productList/yabzssx.jpg' />" alt="">
	            </div>
	            <div class="weui-media-box__bd">
		            <h4 class="weui-media-box__title" style="font-size: 0.8rem">优爱宝终身寿险</h4>
		            <p class="weui-media-box__desc"">后顾无忧|小投入高杠杆|超短等待期</p>
		            
		            <div style="inline-block">
		            	<span style="float:left;color:red; font-size:1rem;margin:0;padding:0">305.0<span style="color:red; font-size:0.5rem">元起</span></span>
			            <span style="float:right">
			            	<img alt="" src="<c:url value='/images/we/insuranceClassify/hengqinrenshou.png' />" style="width:3rem; vertical-align: middle;">    
			            </span>
		            </div>
					<div style="clear:left;width:100%">
						<span style="float:left;vertical-align:middle;color:#ff5b1d; font-size: 0.6rem">推广奖25%</span>
	            		<span style="float:right;color:#999;font-size: 0.6rem">销售0份</span>
					</div>
	            </div>
			</a>
		</div>
	</div>
</div>

<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<script>
$(function(){
	var status = 0;
	var colorPrimary = "#999";
	var colorSelected = "#2196F3";
	var img_up = "<c:url value='/images/we/productList/arrow_up.png' />";
	var img_down = "<c:url value='/images/we/productList/arrow_down.png' />";
	var img_none = "<c:url value='/images/we/productList/arrow_none.png' />";
	//点击按价格排序
	$('#sort-by-price').click(function(){
		if(status == 0) {
			status = 1;
			$(this).css("color",colorSelected);
			$(this).children("img").attr("src", img_up);
		} else if (status == 1) {
			status = 2;
			$(this).children("img").attr("src", img_down);
		} else if (status == 2) {
			status = 1;
			$(this).children("img").attr("src", img_up);
		} else if (status == 3 || status == 4 || status == 5) {
			status = 1;
			$(this).css("color", colorSelected);
			$(this).children("img").attr("src", img_up);
			$(this).siblings().css("color", colorPrimary);
			$(this).siblings().children("img").attr("src", img_none);
		}
	});
	//点击按销量排序
	$('#sort-by-num').click(function(){
		if(status == 0) {
			status = 3;
			$(this).css("color",colorSelected);
			$(this).children("img").attr("src", img_up);
		} else if (status == 3) {
			status = 4;
			$(this).children("img").attr("src", img_down);
		} else if (status == 4) {
			status = 3;
			$(this).children("img").attr("src", img_up);
		} else if (status == 1 || status == 2 || status == 5) {
			status = 3;
			$(this).css("color", colorSelected);
			$(this).children("img").attr("src", img_up);
			$(this).siblings().css("color", colorPrimary);
			$(this).siblings().children("img").attr("src", img_none);
		}
	});
	//点击筛选
	$('#filtrate').click(function(){
		if(status == 0 || status == 1 || status == 2 || status == 3 || status == 4) {
			status = 5;
			$(this).css("color", colorSelected);
			$(this).siblings().css("color", colorPrimary);
			$(this).siblings().children("img").attr("src", img_none);
		}
	});
});
</script>
<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>